<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>01Canvas概述</title>
		<style type="text/css">
			#firCan {
				display: block;
				border: 1px solid gold;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<canvas id="firCan" width="500" height="300">
			<!--Canvas标签宽高默认值为 300*150-->
			当前浏览器版本过低 不支持 Canvas, 请升级!
			<!-- 
				IE 9+ 及其他浏览器都支持Canvas
				IE 9 以下, 可使用 Google 开发的 ExplorerCanvas 插件
			 -->
		</canvas>
		
	</body>
	<script type="text/javascript">
		/*
		 * Canvas 最强大的部分是 2D渲染上下文
		 * 
		 * canvas 标签本身只是这个 2D渲染上下文 的包装器(载体)
		 * 我们可以通过 canvas标签 得到这个 2D渲染上下文
		 * 目前提供的有 3D, 但是只有极少数浏览器支持
		 */
		
		// 1, 获取 canvas标签
		var firCan = document.getElementById("firCan");
		/*
		 * 设置 canvas 宽和高的几种方式:
		 * 1, 在canvas标签上通过 width 和 height 属性设置行间样式
		 * 2, 在 js 中通过设置 canvas的width 和 height 属性设置样式
		 * 注意: canvas 不要使用 CSS 设置宽和高.
		 */
		
		
		// 2, 获取 2D渲染上下文
		var context = firCan.getContext('2d');
		// 3, 绘制直线
		context.beginPath();
		context.moveTo(10, 10);
		context.lineTo(200, 50);
		context.stroke();
		
		// 练习: 绘制三角形
		context.beginPath();
		context.moveTo(10, 50);
		context.lineTo(300, 290);
		context.lineTo(490, 10);
		context.closePath();
//		context.stroke();
		context.fill();
		/*
		 * beginPath(): 开启一个全新绘制
		 * moveTo(): 创建一条全新的子路径
		 * lineTo(): 沿着已有的一条子路径(可以是 moveTo 或者 lineTo 留下来的点)继续划线, 并且将当前子路径的终点设置为 lineTo()方法所携带的两个点.
		 * closePath(): 画一条线, 连接当前子路径的起点和终点.
		 * 
		 * stroke(): 绘制图形轮廓(描边)
		 * fill(): 绘制图形内部区域(填充)
		 */
		
		
	</script>
</html>
